---
image: /generated/articles-docs-studio-toggle.png
title: toggle()
crumb: '@remotion/studio'
---

# toggle()<AvailableFrom v="4.0.287"/>

Toggles playback in the Remotion Studio. If the composition is currently playing, it will pause. If it's paused, it will start playing.

The function accepts an optional event parameter which can be a `React.SyntheticEvent` or a [`PointerEvent`](https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent). This allows the function to be used directly as an event handler.

## Examples

```tsx twoslash title="Toggle playback on button click"
import {toggle} from '@remotion/studio';

const ToggleButton = () => {
  // Call with the event parameter for better browser audio autoplay

  return <button onClick={(e) => toggle(e)}>Play/Pause</button>;
};
```

```tsx twoslash title="Toggle playback programmatically"
import {toggle} from '@remotion/studio';

// Call without event parameter
toggle();
```

## See also

- [play()](/docs/studio/play)
- [pause()](/docs/studio/pause)
- [seek()](/docs/studio/seek)
- [Source code for this function](https://github.com/remotion-dev/remotion/blob/main/packages/studio/src/api/toggle.ts)
